<template>
  <div class="root">
    <el-card shadow="never">
      <div class="titleBox">编辑信息</div>
      <div class="formBox">
        <el-form ref="form" :model="form" label-width="100px">
          <div class="formList">
            <el-form-item label="店铺名称：">
              <el-input
                v-model="form.storeName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="所在市场：">
              <el-select v-model="form.storeMarket" placeholder="请选择">
                <el-option
                  v-for="(item, index) in scData"
                  :key="index"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="formList">
            <el-form-item label="店铺联系人：">
              <el-input
                v-model="form.memberNickName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话：">
              <el-input
                v-model="form.storePhone"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <div class="textBox">
              (此联系方式方便分销商可以联系到您，请认真检查是否正确)
            </div>
          </div>
          <div class="formList">
            <el-form-item label="店铺地址：">
              <el-input
                v-model="form.storeAddressDetail"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input v-model="form.storeEmail" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="formList">
            <el-form-item label="微信号：">
              <el-input v-model="form.storeVx" placeholder="请输入"></el-input>
            </el-form-item>
            <div class="textBox">
              (此联系方式方便分销商可以联系到您，请认真检查是否正确)
            </div>
          </div>

          <el-form-item label="微信二维码：">
            <el-upload
              :action="action + '/common/upload/file'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              list-type="picture-card"
            >
              <div class="cententBox" v-if="!form.storeQrcode">
                <img
                  src="@/static/Imgs/userImg/shangchuan.png"
                  class="uploadImg"
                  alt=""
                />
                <div>上传图片</div>
              </div>
              <div class="cententBox" v-else>
                <img
                  style="width: 1.48rem; height: 1.48rem"
                  :src="form.storeQrcode"
                  alt=""
                />
              </div>
            </el-upload>
            <div class="textBox" style="color: #a7adb8; font-size: 0.12rem">
              (此联系方式方便分销商可以联系到您，请认真检查是否正确)
            </div>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="售后服务:" label-width="100px">
            <el-checkbox
            disabled
              v-model="form.returnGoods"
              label="支持15天退货"
            ></el-checkbox>
            <el-checkbox
            disabled
              v-model="form.exchangeGoods"
              label="支持15天换货"
            ></el-checkbox>
          </el-form-item>
          <el-form-item label="店铺域名:" label-width="100px">
            http：//
            <el-input
              style="width: 1.5rem"
              v-model="form.storeDomainName"
              placeholder="请输入"
            ></el-input>
            .wjtzw.cn
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="">
           <div style="display: flex;">
            <div class="redBtn" @click="updateStoreInfo">提交申请</div>
            <div class="redBtn" style="margin-left: 10px;"  @click="$router.back()">返回</div>
           </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
        
        <script>
import { updateStoreInfo, pmsStore } from "@/api/shopMange";
import { selectAllByType } from "@/api/seller/management";
import imgPath from "@/utils/config";
export default {
  data() {
    return {
      form: {
        storeQrcode: null,
      },
      scData: [],
      action: "",
    };
  },
  created() {
    this.action = imgPath.imgPath;
    this.getUserData();
    this.selectAllByType();
  },
  methods: {
    //上传二维码
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.form.storeQrcode = res.data;
    },
    //图片校验
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 3MB!");
        return false;
      }
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isPDF = testmsg === "pdf";
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片只能是 png,jpg,pdf 格式!");
        return false;
      }
      this.loading = true;
      return true;
    },
    //获取个人信息
    getUserData() {
      pmsStore({
        memberId: this.$route.query.id,
      }).then((res) => {
        this.form = res.data;
      });
    },
    // 获取市场数据
    selectAllByType() {
      selectAllByType({
        name: "Market",
      }).then((data) => {
        this.scData = data.data;
      });
    },
    //编辑信息
    updateStoreInfo() {
      updateStoreInfo(this.form).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "提交成功，等待后台审核",
            type: "success",
          });
          this.$router.back();
        }
      });
    },
  },
};
</script>
        
        <style scoped lang="scss">
        /deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #606266;
}
/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}
.root {
  .titleBox {
    font-size: 0.2rem;
    font-weight: 700;
  }

  .formBox {
    margin-top: 0.2rem;
    .formList {
      display: flex;
      align-items: center;
      .textBox {
        color: #a7adb8;
        font-size: 0.12rem;
      }
    }
    /deep/ .el-form-item {
      display: flex;
      margin-bottom: 0.1rem;
      width: 30%;
    }
    /deep/ .el-input__inner {
      background-color: #f5f7f9;
      border: 1px solid #e8e8e8;
    }
    /deep/ .el-input {
      width: 3rem;
    }
    .uploadImg {
      width: 0.4rem;
      height: 0.4rem;
      margin: 0.2rem 0;
      margin-top: 0.3rem;
    }
    .cententBox {
      color: #999999;
    }
    /deep/ .el-upload--picture-card {
      line-height: 0;
    }
    .redBtn {
      width: 0.9rem;
      height: 0.3rem;
      line-height: 0.3rem;
      background: #e22a1f;
      color: #fff;
      border-radius: 20px;
      text-align: center;
      margin-left: 0.8rem;
      margin-top: 0.2rem;
      cursor: pointer;
    }
  }
}
</style>
        
        